<template>
    <div>
        <div style="float: left;width: 60%;">
          <div style="width: 70%;margin-left: 220px;">
            <el-form label-width="120px" :model="editForm" :rules="rules" ref="editForm">
              <el-form-item label="任务名称" prop="deptName">
                <el-input v-model="editForm.deptName" style="height:60px;" auto-complete="off" placeholder="请输入任务名称"></el-input>
              </el-form-item>
              <el-form-item label="选择负责员工" prop="deptNo">
                <el-button class="blue" size="small" @click="" icon="el-icon-plus">添加员工</el-button>
              </el-form-item>
              <el-form-item label="标签" prop="deptNo">
                <el-button class="blue" size="small" @click="" icon="el-icon-plus">添加标签</el-button>
              </el-form-item>
              <el-form-item label="入群欢迎语" prop="deptNo">
                <el-input type="textarea" :rows="4" placeholder="请输入欢迎语" v-model="editForm.deptNo">
                </el-input>
              </el-form-item>
              <div style="margin-left: 120px;">
                <el-checkbox v-model="checked">客户扫码添加员工，默认验证通过</el-checkbox>
                <ol type="1" style="background-color: #8bd9ff;border: 1px solid #8bd9ff;border-radius: 4px;">
                  <br>
                  <li>可添加多个群聊并分别上传群二维码，群人数上限最多为200；</li>
                  <li>当前面的群人数达到上限后，自动发送后面的群二维码；</li>
                  <li>请确保上传的群二维码与所选群聊对应，群二维码和群聊【对应错误】将导致【拉群任务失败】</li>
                  <br>
                </ol>
              </div>
              <br>
              <el-form-item label="群聊" prop="deptNo">
                <el-button class="blue" size="small" @click="" icon="el-icon-plus">添加群聊</el-button>
              </el-form-item>
            </el-form>

            <div slot="footer" class="dialog-footer" style="text-align: center;">
              <el-button size="small" type="primary" class="title" @click="submitForm('editForm')">确认</el-button>
              <el-button size="small" @click="back">取消</el-button>
            </div>
          </div>
        </div>
      <div class="right" style="float: left;">
        <iframe src="http://wx.zzxapps.com/pages/preview/custGroup/index" frameborder="0" style="width: 300px;height: 560px;"></iframe>
      </div>
    </div>

</template>
<script>
export default {
    name: "AutoCreateSave",
    data() {
        return {
            checked: true,
            editForm: {
                deptId: '',
                deptName: '',
                deptNo: '',
                token: localStorage.getItem('logintoken')
            },
            // rules表单验证
            rules: {
                deptName: [
                    {required: true, message: '请输入任务名称', trigger: 'blur'}
                ]
            }
        }
    },
    methods: {
        back() {
            this.$emit("currentHandler", "list")
        },
        submitForm(editForm) {
            this.$emit("currentHandler", "list")
        }
    }
}
</script>

<style scoped>
.blue {
    border: 1px solid #409eff;
    color: #409eff;
}

.dialog-footer {
    padding-left: 7%;
}

.dialog-footer div {
    margin-bottom: 20px;
}
</style>
